<template>
<div class="ygbh-menu">
    <ul class="group-item" v-for='groupItem in listData' :key="groupItem.Basic">
        <div class="group-item-title">{{groupItem.title}}</div>
        <ul class="group-hash-list">
            <li class="group-hash-item" v-for='hashItem in groupItem.children' :key='hashItem.menuUrl'>
                <router-link :to="hashItem.menuUrl">{{hashItem.title}}</router-link>
            </li>
        </ul>
    </ul>
</div>
</template>

<script>
import menuList from '../common/menuList'

export default {
    name: 'Ygbhmenu',
    props: {
        msg: String
    },
    data () {
        return {
            listData: menuList,
        };
    },
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.ygbh-menu .group-item-title{ font-size: 12px; color: #999; line-height: 26px; margin-top: 15px; }
.ygbh-menu .group-hash-item a{ line-height: 40px; font-size: 14px; text-decoration: none; color: #444; overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.ygbh-menu .group-hash-item a:hover, .ygbh-menu .group-hash-item a.router-link-exact-active{ color: #409eff; }
</style>
